<template>
  <div class="padding-20">
    <div class="flex justify-between">
      <tab ref="tab" :tabList="tabList" @tabChange="tabChange"></tab>
      <div class="project-select">
        <el-select v-model="projectKey" size="mini" placeholder="请选择项目" @change="changeProject">
          <el-option v-for="item in projectOptions" :key="item.projectKey" :label="item.projectName" :value="item.projectKey" />
        </el-select>
      </div>
    </div>
    <bar style="height: 350px" ref="bar" :ch-config="settingConfig" :banLegendDefaultClick="true"></bar>
  </div>
</template>
<script>
  import { barConfig } from '@js/echartsConfig';
  import Bar from '@c/echarts/bar';
  import tab from '@c/tab.vue';
  import { apiBusinessProportionRate } from '../../../api/businessBuilding';
  import { accMul } from '@g/js/utils';
  export default {
    props: {
      projectOptions: {
        type: Array,
        default: () => {
          return [];
        },
      },
    },

    components: { tab, Bar },

    data() {
      return {
        projectKey: '',
        settingConfig: this.lodash.cloneDeep(barConfig),
        model: {},
        activeTab: 'area',
        tabList: [
          {
            type: 'area',
            lable: '业态占比(面积)',
          },
          {
            type: 'duty',
            lable: '业态占比(权责收入)',
          },
        ],
      };
    },

    methods: {
      async initData(projectKey) {
        if (projectKey) {
          this.projectKey = projectKey;
        }
        let res = await apiBusinessProportionRate({ projectId: projectKey || this.projectKey });
        this.model = res;
        this.setChartsData();
      },

      //set柱状图数据
      setChartsData() {
        let data = this.activeTab == 'area' ? this.model.itemList : this.model.forecastList;
        this.settingConfig.xAxisData.splice(0, this.settingConfig.xAxisData.length);
        this.settingConfig.list[0].data.splice(0, this.settingConfig.list[0].data.length);
        for (let i in data) {
          this.settingConfig.xAxisData.push(data[i].industryTypeName);
          this.settingConfig.list[0].data.push(accMul(data[i].valueRate,100));
        }
        //初始化echart
        this.$nextTick(() => {
          this.$refs.bar.initChart();
        });
      },

      tabChange(item) {
        this.activeTab = item.type;
        this.setChartsData();
      },

      changeProject() {
        this.initData();
      },

      initChartConfig() {
        this.settingConfig.title = '占比(%)';
        this.settingConfig.gridTop = '60px';
        this.settingConfig.titleTop = 20;
      },
    },

    created() {
      this.initChartConfig();
      // this.initData();
    },

    mounted() {},
  };
</script>
<style scoped lang="scss"></style>
